﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="stwh_Web.extend.huodong.index" %>
<%@ Import Namespace="stwh_Model" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container bg">
            <div class="titlePanle">
                <img src="images/title.jpg" style="width: 100%;" />
            </div>
            <div class="resultPanle">
                <div class="resultstitle">
                    <img src="images/title1.jpg" style="width: 100%;" />
                </div>
                <div style="padding: 0px 15px;">
                    <div class="resultTitle">
                        <div>手机号码</div>
                        <div>中奖时间</div>
                    </div>
                    <div class="resultContent">
                        <div id="timePanle" style="display:none;">
                            <div>距离开奖还有</div>
                            <div id="timediv">0秒</div>
                        </div>
                        <ul id="resultUL">
                            <%
                                foreach (stwh_cjresult item in ListData)
                                {
                                    string ss = item.stwh_cjrmobile.Substring(0, 3) +"****"+ item.stwh_cjrmobile.Substring(item.stwh_cjrmobile.Length - 3, 3);
                                    %>
                            <li data-id="<%=item.stwh_cjrid %>">
                                <div><%=ss %></div>
                                <div><%=item.stwh_cjraddtime.ToString("yyyy-MM-dd") %></div>
                            </li>
                            <%
                                }
                                 %>
                        </ul>
                    </div>
                    <div style="width:100%; height:70px;"></div>
                </div>
            </div>
            <div class="btnPanle">
                <img id="btnregister" src="images/btn.png" style="width: 100px;height:105px;" />
            </div>
            <div style="color: #fff; padding: 0px 15px 15px 15px;">
                <p style="font-size: 16px;">
                    活动规则：
                </p>
                <p>
                    ①活动时间：2017年3月2日22：00；<br />
                    ②活动奖励：<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;幸运奖（御燕9℃燕窝面膜一盒，10名）<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;互动奖（10元微信红包，20名）；<br />
                    ③活动规则：每位用户在参与抽奖页面填写手机号（不能重复哦），在22:00准时进行抽奖，共抽取30名用户，前10名用户将得到幸运奖，第11~30名用户将得到互动奖；<br />
                    ④本次抽奖形式为系统随机抽取<br />
                    ⑤本活动最终解释权归御燕9℃所有。
                </p>
            </div>
            <div id="btnCJ" style="width:100%;height:35px; color:#fff; text-align:center;">☺</div>
        </div>
    </form>
    <div id="registerPanle">
        <div id="registerPanleDiv">
            <div>参与抽奖</div>
            <div style="margin-bottom: 15px;">
                <input type="text" id="mobile" placeholder="请输入手机号码" />
            </div>
            <div style="text-align: center;">
                <button id="btnok">确 定</button>
            </div>
        </div>
    </div>
    <div id="loginPanle">
        <div id="loginPanleC">
            <div>管理人员登录</div>
            <div style="margin-bottom: 15px;">
                <input type="text" id="name" placeholder="请输入用户名" />
            </div>
            <div style="margin-bottom: 15px;">
                <input type="password" id="pwd" placeholder="请输入密码" />
            </div>
            <div style="text-align: center;">
                <button id="btnLogin">登 录</button>
            </div>
        </div>
    </div>
    <div id="choujiangPanle">
        <div id="choujiangPanleDiv">
            <div>开始抽奖</div>
            <div id="cjresultMsg" style="margin-bottom: 15px; text-align:center; font-size:18px;">
            </div>
            <div style="text-align: center;">
                <button id="btnkj" data-id="0">开 始</button>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript">
        Array.prototype.removeIndexArray = function (index) {
            if (isNaN(index) || index > this.length || index < 0) return [];
            this.splice(index, 1);
            return this;
        };
        //在min-max之间生成随机数
        function GetRandomNum(Min, Max) {
            var Range = Max - Min;
            var Rand = Math.random();
            return (Min + Math.round(Rand * Range));
        }
    </script>
    <script type="text/javascript">
        var stoptime = ('<%=stoptime%>').replace(/-/g, "/");
        var stopid, chatime, isRegister = true, isresult = false,stopgdid,speedtime=50,qjUserIndex;
        var cjUserList = [];
        function chkID(id)
        {
            var jbresult = false;
            $.each($("#resultUL li"), function (index, item) {
                var jbid = $(item).attr("data-id");
                if (jbid == id) {
                    jbresult = true;
                    return false;
                }
            });
            return jbresult;
        }
        function GetResultData()
        {
            $.post("/Handler/extend/huodong/loadData.ashx", {}, function (data) {
                if (data.msgcode == "0") {
                    $.each(data.msg, function (index, item) {
                        if (!chkID(item.stwh_cjrid)) {
                            $("#resultUL").prepend("<li data-id=\"" + item.stwh_cjrid + "\"><div>" + item.stwh_cjrmobile + "</div><div>" + item.stwh_cjraddtime.split('T')[0] + "</div></li>");
                        }
                    });
                }
                else {
                    alert(data.msg);
                }
            }, "json");
        }
        function chkLogin()
        {
            $.post("/Handler/extend/huodong/chk.ashx", {}, function (data) {
                if (data == "no") isresult = false;
                else isresult = true;
            }, "text");
        }
        $(function () {
            //参与抽奖
            $("#btnok").click(function () {
                if (isRegister) {
                    var mobile = $("#mobile").val();
                    if (!mobile) {
                        alert("请输入手机号码！！");
                        return false;
                    }
                    $.post("/Handler/extend/huodong/register.ashx", {
                        name: "",
                        mobile: mobile
                    }, function (data) {
                        if (data.msgcode == "0") {
                            $("#registerPanle").hide();
                            alert("成功参与，请耐心等候开奖吧，祝您好运！！");
                        }
                        else {
                            if (data.msg == "no") alert("该号码已被使用！！");
                            else alert(data.msg);
                        }
                    }, "json");
                }
                else {
                    alert("活动已经截止参与，请关注抽奖结果！");
                }
                return false;
            });
            $("#btnLogin").click(function () {
                var name = $("#name").val();
                if (!name) {
                    alert("请输入用户名！！");
                }
                var pwd = $("#pwd").val();
                if (!pwd) {
                    alert("请输入密码！！");
                }
                $.post("/Handler/extend/huodong/login.ashx", {
                    name: name,
                    pwd: pwd
                }, function (data) {
                    if (data.msgcode == "0") {
                        $("#loginPanle").hide();
                        cjUserList = data.msg.split(',');
                        $("#choujiangPanle").show();
                    }
                    else {
                        alert(data.msg);
                    }
                }, "json");
            });
            $("#btnkj").click(function () {
                chkLogin();
                setTimeout(function () {
                    if (isresult) {
                        var jbid = $("#btnkj").attr("data-id");
                        if (jbid == "0") {
                            $("#btnkj").text("暂 停").attr("data-id", "1");
                            stopgdid = setInterval(function () {
                                qjUserIndex = GetRandomNum(0, cjUserList.length - 1);
                                $("#cjresultMsg").text(cjUserList[qjUserIndex].substr(0, 3) + "****" + cjUserList[qjUserIndex].substr(7, 4));
                            }, speedtime);
                        }
                        else {
                            clearInterval(stopgdid);
                            //提交
                            $.post("/Handler/extend/huodong/add.ashx", { mobile: cjUserList[qjUserIndex] }, function (data) {
                                if (data.msgcode == "0") {
                                    $("#registerPanle").hide();
                                }
                                else {
                                    alert(data.msg);
                                }
                            }, "json");
                            cjUserList.removeIndexArray(qjUserIndex);
                            $("#btnkj").text("开 始").attr("data-id", "0");
                        }
                    }
                    else {
                        alert("登录状态已经失效，请重新登录！！！");
                    }
                }, 1000);
                return false;
            });
            $("#btnCJ").click(function () {
                $("#loginPanle").show();
            });
            $("#btnregister").click(function () {
                if (isRegister) {
                    $("#registerPanle").show();
                }
                else {
                    alert("活动已经截止参与，请关注抽奖结果！");
                }
            });
            $("#registerPanleDiv,#loginPanleC,#choujiangPanleDiv").click(function () {
                return false;
            });
            $("#registerPanle,#loginPanle,#choujiangPanle").click(function () {
                $(this).hide();
            });
            try {
                chatime = Date.parse(stoptime) - Date.now();
                if (chatime <= 0) {
                    $("#timePanle").hide();
                    isRegister = false;
                }
                else {
                    $("#timePanle").show();
                    stopid = setInterval(function () {
                        chatime = Date.parse(stoptime) - Date.now();
                        if (chatime <= 0) {
                            $("#timePanle").hide();
                            clearInterval(stopid);
                        }
                        else {
                            $("#timediv").text(Math.floor(chatime / 1000) + "秒");
                        }
                    }, 1000);
                }
                //获取中奖信息
                setInterval(function () {
                    GetResultData();
                }, 5000);
            } catch (e) {

            }
        });
    </script>
</body>
</html>
